<template>
  <view class="page">
    <view class="flex flex_row_between order_number twelve_font">
      <text style="font-size: 24rpx">订单编号：{{ item.order_sn }}</text>
      <!-- <text class="red_font" v-if="item.is_prior_payment == 0 && item.order_status==0">货到付款</text> -->
      <text
        :class="
          item.order_status == 4
            ? 'gray_font'
            : item.order_status == 0
            ? 'red_font'
            : 'dgreen'
        "
        >{{ stateList[item.order_status].name }}</text
      >
    </view>
    <view class="flex flex_row_center">
      <view style="flex-basis: 100%">
        <view class="flex-middle">
          <view class="imgs flex-middle">
            <image class="img" :src="item.img" mode="aspectFit"></image>
            <!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
          </view>
          <view class="order_info fourteen">
            <view class="flex flex_row_between">
              <view class=""
                >{{ item.goods_name }}
                <text v-if="item.sum_order_num > 1" style="margin-left: 10rpx"
                  >等商品</text
                >
              </view>
              <view style="color: #adaeaf">
                <text> 共 {{ item.sum_order_num }} 件</text>
                <u-icon name="arrow-right" color="gray" size="18"></u-icon>
              </view>
            </view>
            <view> 下单时间：{{ item.createdTime }}</view>
            <view> 配送日期：{{ item.send_time }} </view>
            <view v-if="item.order_status == 0 && item.is_prior_payment == 1">
              支付时间：
              <u-count-down
                @end="timeEnd"
                :timestamp="times"
                font-size="28"
                color="#fff"
                bg-color="#000"
              ></u-count-down>
            </view>
          </view>
        </view>
        <view class="total">
          <view style="color: gray">
            配送金额:<text class=""
              >￥{{ Number(item.send_money).toFixed(2) }}</text
            >
          </view>
          <view>
            实付金额:<text class="red_font"
              >￥{{ Number(item.real_money).toFixed(2) }}</text
            >
          </view>

          <!-- </view> -->
        </view>

        <view class="select_button text_right">
          <!-- <text class="cancel_order" v-show="item.order_status==0" @click.stop="clickbtn('cancelOrder',item.id,'取消订单')">取消订单</text> -->
          <text
            class="confirm_pay"
            v-show="
              item.order_status == 0 && item.is_prior_payment == 1 && !timeend
            "
            @click.stop="clickbtn('toPay', item.id)"
            >立即支付</text
          >
          <text
            class="check_log"
            v-show="item.order_status == 2"
            @click.stop="clickbtn('getLogistics', item.id, '查看物流')"
            >查看物流</text
          >
          <text
            class="return_good"
            v-show="item.order_status == 2"
            @click.stop="clickbtn('getOrderDetail', item.id, '申请退货')"
            >申请退货</text
          >
          <text
            class="confirm_good"
            v-show="item.order_status == 2"
            @click.stop="clickbtn('confirmOrder', item.id, '确认收货')"
            >确认收货</text
          >
          <text
            class="another_order"
            v-show="item.order_status == 3"
            @click.stop="clickbtn('onceAgain', item.id, '再来一单')"
            >再来一单</text
          >
        </view>
      </view>
      <!-- <text class="success_pay">支付成功</text> -->
    </view>
  </view>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {
      logo: "",
      showLogo: 0,
      times: null,
      timeend: false, //时间是否到了
      stateList: [
        { name: "待审核" },
        { name: "备货中" },
        { name: "配送中" },
        { name: "已完成" },
        { name: "已取消" },
      ],
    };
  },
  mounted() {
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");
    this.times =
      1800 + Number(this.item.created_at) - new Date().getTime() / 1000;
    if (this.times <= 0) {
      this.timeend = true;
    }
  },
  methods: {
    clickbtn(type, id, msg) {
      this.$emit("clickbtn", { type, id, msg });
    },
    timeEnd() {
      this.timeend = true;
      this.$emit("getData", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .imgs {
    width: 120rpx;
    height: 120rpx;
    position: relative;
    .logo {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .img {
      width: 112rpx;
      height: 80rpx;
      margin-right: 22rpx;
    }
  }
  .order_number {
    height: 64rpx;
    line-height: 64rpx;

    border-bottom: 1px solid #ececec;
  }

  .order_info {
    flex-basis: 100%;
    > view {
      margin: 10rpx 0;
    }
  }

  .sign_order:nth-child(n + 2) {
    margin-top: 20rpx;
  }

  .select_button {
    padding: 26rpx 0;

    .another_order,
    .confirm_pay {
      border-color: #55a68c;
      color: #55a68c;
    }

    .look_logist,
    .cancel_order {
      color: #8f8f8f;
    }

    .confirm_good {
      color: #e53131;
    }
    .return_good {
      color: #fd5e2e;
    }
  }

  .select_button > text {
    border: 1px solid;
    padding: 8rpx 22rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    border-radius: 24rpx;
  }
  .top_title {
    .user-icon {
      height: 30rpx;
    }
    .account {
      margin-left: 10rpx;
    }
  }
}
.total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  view {
    margin-left: 10rpx;
    &:not(:last-of-type) {
      font-size: 24rpx;
    }
  }
}
</style>
